<template>

  <el-form ref="registerForm" :model="registerForm" :rules="registerFormRules">
    <el-form-item label="手机号" prop="phoneNumber" class="phonetext">
      <el-input v-model="registerForm.phoneNumber"></el-input>
    </el-form-item>
    <el-form-item label="验证码" prop="repass" class="codetext">
      <el-input v-model="registerForm.repass"></el-input>
      <el-button class="send-code-btn" :disabled="countdown > 0" @click="sendCode">
        {{ countdown > 0 ? countdown + 's' : '发送验证码' }}
      </el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>


import Cookies from "js-cookie";
import router from "@/router";
import Success from "@/components/Success";
export default {
  name: "UpdatePhoneNumber",
  data(){

    return {
      registerForm: {
        phoneNumber: '',
        repass: ''
      },
      countdown: 0,
      timer: null,
      registerFormRules: {
        phoneNumber: [
          {required: true, message: "手机号必填", trigger: "blur"},
          {min: 11, max: 11, message: "手机号格式错误,请检查!", trigger: "blur"}
        ],
        repass: [
          {required: true, message: "验证码必填", trigger: "blur"},
          {min: 6, max: 6, message: "验证码格式错误,请检查!", trigger: "blur"}
        ]
      }
    }
  },
  methods:{
    sendCode() {

      // 发送验证码的逻辑
      if (!this.registerForm.phoneNumber) {
        this.$message.error('请输入手机号')
        return
      }
      // 发送验证码的异步请求
      // ...
      // 设置倒计时
      this.$axios.postForm("/userinfo/getCode", this.registerForm)
          .then(reponse => {
            if (reponse.data.code === 200) {

              this.$message({
                message: "发送成功",
                type: "success",
                duration: 2000,
              })
            } else {
              this.$message({
                message: reponse.data.msg,
                type: "error",
                duration: 2000,
              })
            }
          })
      this.countdown = 60
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--
        } else {
          clearInterval(this.timer)
          this.timer = null
        }
      }, 1000)
    },
    submitForm() {
      this.$refs.registerForm.validate((validate) => {
        console.log(this.registerForm)
        if (!validate) {
          this.$message({
            message: "请正确填写表单",
            type: "error",
            duration: 2000,
          })
          return;
        }
        console.log(this.registerForm.phoneNumber)
        console.log(this.registerForm.repass)
        this.$axios.post("/userinfo/updateUserPhoneNumber",this.registerForm).then(res=>{
          if (res.data.code === 200) {
            router.push("Success");
          }else {
            this.$message({
              message: res.data.msg,
              type: "error",
              duration: 2000,
            })
          }
        })
      })
    },
    initCurrentUser() {
      let usertoken  = Cookies.get('user');
      console.log("usertoken/////////////")
      console.log(usertoken)

      const config = {
        token:usertoken,
      }
      console.log("config////////////////////////////////////////////")
      console.log(config)
      this.$axios.post("/userinfo/analysis", config)
          .then(response => {
            console.log(response)

            let responseData = response.data;
            console.log(responseData)


            if (responseData.code === 200) {
              let userdata = responseData.data;
              console.log( "userdata---------------------------------")
              console.log( userdata)

              if (userdata) {
                this.currentUserInfo = userdata;
                this.currentSrc = userdata.userIcon;
                console.log( "this.currentSrc-------------------------")
                console.log( this.currentSrc)
              }else {
                this.$message({
                  message: responseData.msg,
                  type: "error",
                  duration: 2000,
                })
                this.logout();
              }
            } else {
              this.$message({
                message: "登录状态异常,请重新登录",
                type: "error",
                duration: 2000,
              })
              this.logout();
            }
            this.src = response.data.data.userIcon;
          })

    },
  },
  created() {
    this.initCurrentUser();
  }
}
</script>

<style scoped>

</style>